<!--  -->
<template>
  <div class="student">
    <h1>学生组件</h1>
    <h2 class="cc">
      学生姓名：<span class="yy">{{ name }}</span>
    </h2>
    <h2>年龄:<span class="yy">{{ age }}</span></h2>
    <h2>所属年级：{{ grade }}</h2>
    <h2>所属班级: {{ cls }}</h2>
    <h2>所属学校: {{ school }}</h2>
    <div>
      <input type="text" v-model="changeName" />
      <input type="button" value="修改" @click="editName" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Student",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  //1.只接受
  //   props:['name','grade','cls'],
  //2. 限制类型
  // props: {
  //     name: String,
  //     grade: String,
  //     cls: String,
  //     age: Number,
  // },
  //3.限制类型 必要性，指定默认值 required是否必传 default默认值

  props: {
    name: {
      type: String,
      required: true,
    },
    grade: {
      type: String,
      required: true,
      default: "一年级",
    },
    cls: {
      type: String,
      required: true,
      default: "一班",
    },
    age: {
      type: Number,
      default: 18,
    },
  },
  data() {
    //这里存放数据
    return {
      school: "北京小学",
      changeName: "",
    };
  },
  methods: {
    editName() {
      //获取文本内容
      console.log("修改:" + this.name);
      // this.name = this.changeName

      console.log(this.changeName);
      this.$emit("up", this.changeName, 200);
    },
  },
};
</script>
<style scoped lang="less">
.student {
  background-color: pink;
  .cc{
    color: red;
    .yy{
      color: goldenrod;
    }
  }
  .yy{
    color: green;
  }
}

</style>